<template>
  <view>
    <view class="top-bar">
      <view class="tabs-bar">
        <u-tabs
          :list="tabs_list"
          lineWidth="20"
          :lineHeight="0"
          :activeStyle="{
            color: '#4187FF',
            fontWeight: 'bold',
            fontSize: '36rpx'
          }"
          :inactiveStyle="{
            color: '#999999',
            fontSize: '30rpx'
          }"
          itemStyle="padding-left: 15rpx; padding-right: 15rpx; "
          @click="onClickTab"
        ></u-tabs>
      </view>
      <view class="search-bar">
        <u-search
          :placeholder="$t('me.searchOrderPlaceholder')"
          v-model="keyword"
          :showAction="false"
          height="54rpx"
          bgColor="#fff"
          borderColor="#EDEDED"
          placeholderColor="#6D7484"
          :searchIconSize="44"
          @search="onSearch"
        ></u-search>
      </view>
    </view>

    <template v-if="current_tab === 0">
      <!-- 订单列表 -->
      <ProjectListV2 :project_list="project_list" :navigateTo="navigateTo" ref="ProjectListRef" />
    </template>

    <!-- QC report -->
    <template v-else>
      <QCList :qc_report_list="qc_report_list" :navigateTo="navigateTo" />
    </template>
  </view>
</template>

<script>
import storage from '@/utils/storage'
import { USER_INFO } from '@/store/mutation-types'
import { getQCReportList, getProjectList } from '@/api/me/index'
import QCList from './components/QCList.vue'
import ProjectListV2 from './components/ProjectListV2.vue'

export default {
  data() {
    return {
      keyword: '',
      current_tab: 0,
      tabs_list: [
        {
          name: this.$t('me.order')
        },
        {
          name: this.$t('me.qcReport')
        }
      ],
      project_list: [],
      qc_report_list: []
    }
  },
  components: { QCList, ProjectListV2 },
  methods: {
    onClickTab(item) {
      this.current_tab = item.index
      if (item.index === 0) {
        this.fetchProjectList()
      } else {
        this.fetchQCReportList()
      }
    },
    async fetchProjectList() {
      try {
        //每次请求都取一次?
        const user_info = storage.get(USER_INFO)
        if (user_info && user_info.userId) {
          const base_params = {
            // page: 1,
            // pageSize: 10,
            client_id: user_info.userId
          }
          //跟浏览器机制不一样,传undefined,小程序真的会传给后端

          const {
            result: { items }
          } = await getProjectList(base_params)
          this.project_list = items
        }
      } catch (e) {
        throw new Error(e)
      }
    },
    async fetchQCReportList() {
      const {
        result: { items }
      } = await getQCReportList({ client_id: storage.get(USER_INFO).userId })
      this.qc_report_list = items
    },
    async onSearch(source_uniqid) {
      const user_info = storage.get(USER_INFO)
      if (this.current_tab === 0) {
        const params = { source_uniqid, client_id: user_info.userId }
        const {
          result: { items }
        } = await getProjectList(params)

        this.project_list = items
      } else {
        const {
          result: { items }
        } = await getQCReportList({ source_uniqid, client_id: user_info.userId })
        this.qc_report_list = items
      }
    },

    navigateTo(url) {
      uni.navigateTo({ url: url })
    }
  },
  async onLoad() {
    this.fetchProjectList()
  },
  onShow() {}
}
</script>

<style lang="scss" scoped>
@import './scss/index.scss';
</style>
